<template>
	<view>
		<image class="topbg" :src="apifun.serveimg+'hometopbg.png'" mode=""></image>
		<page-head :title="'学车报名'" :headtype="1" :bg="`transparent`"></page-head>
		<view class="topblock" :style="{ top:statusheadheight+'px'}">
			<view class="searchblock marginAuto">
				<view class="searchmain marginAuto flex">
					<view class="searchl flex">
						<view class="searchlicon flex">
							<uv-icon class="marginAuto" name="search" size="30" color="#DADAE5"></uv-icon>
						</view>
						<view class="searchinput">
							<input type="text" v-model="searchtxt" @confirm="searchfun" placeholder="请输入驾校名称/城市" @keyup.enter="searchfun" />
						</view>
					</view>
					<!-- <view class="searchr" @click="searchfun">
						<image :src="apifun.serveimg+'learnsearch.png'" mode=""></image>
						<text class="searchrtxt baiColor">搜索</text>
					</view> -->
				</view>
			</view>
			<view class="classify flex">
				<view class="classifyeach flex" @click="districtfun">
					<view class="classifyeachtxt">{{ opensiteac.name || '地区' }}</view>
					<view class="classifyeachicon">
						<uv-icon name="arrow-down-fill" size="14" color="#222222"></uv-icon>
					</view>
				</view>
				<view class="classifyeach flex" @click="distancefun">
					<view class="classifyeachtxt" :class="jlac ? 'mainColor':''">距离</view>
					<view class="classifyeachicon">
						<uv-icon name="arrow-down-fill" size="14" :color="jlac ? '#0089FB':'#222222'"></uv-icon>
					</view>
				</view>
				<view class="classifyeach flex" @click="heatfun">
					<view class="classifyeachtxt" :class="rdac ? 'mainColor':''">热度</view>
					<view class="classifyeachicon">
						<uv-icon name="arrow-down-fill" size="14" :color="rdac ? '#0089FB':'#222222'"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="jdlist">
			<view class="jditem flex marginAuto" v-for="(item,index) in datas" :key="index" @click="navigate('/pages/learn/learnxq','id='+item.id)">
				<view class="jdimg">
					<view class="jdimgb">
						<text class="jdimgbr">{{ item.num || 0 }}人报名</text>
						<image class="learnb" :src="apifun.serveimg+'learnb.png'" mode=""></image>
					</view>
					<image class="jdimggoods" :src="apifun.URLimg+item.img" mode="aspectFill"></image>
				</view>
				<view class="jbmsg">
					<view class="jbmsgtitle ellipsis01">{{ item.name }}</view>
					<view class="jbmsgsite flex">
						<view class="jbmsgsitetxt">{{ item.city_name }}</view>
						<view class="jbmsgsitejl flex" style="margin-top:5rpx;">
							<uv-icon name="map" color="#0C6BF7" size="14"></uv-icon>
							<text class="mainColor" style="font-size:20rpx;margin-left:5rpx;">{{ item.distance }}km</text>
						</view>
					</view>
					<block v-if="item.course_list.length > 0">
						<view class="jbmsgdoc flex" v-for="(items,indexs) in item.course_list" :key="index">
							<view class="jbmsgdocb">惠</view>
							<view class="jbmsgdocmoeny">￥{{ items.price }}</view>
							<view class="jbmsgdoctxt ellipsis01">{{ items.name }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<uv-picker ref="siteref" :columns="opensitedata" keyName="name" @confirm="entersite"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				apifun:this.apifun,
				page:1,
				opensitedata:[[]],
				opensiteac:{},
				jlac:false,
				rdac:false,
				searchtxt:'',
				lng :'',
				lat :'',
				datas:[]
			};
		},
		onLoad() {
			this.lng = uni.getStorageSync('lng');
			this.lat = uni.getStorageSync('lat');
			this.getopensitefun();
			this.initData();
		},
		onShow() {
			this.getpositionfun();
		},
		methods: {
			initData(){
				let sort = '';
				if(this.jlac){
					sort = 1
				};
				if(this.rdac){
					sort = 2
				};
				let sendData = {
					search:this.searchtxt,
					city_id:this.opensiteac.city_id || '',
					sort:sort,
					lng:this.lng || this.apifun.lng,
					lat:this.lat || this.apifun.lat,
					page:this.page,
					limit:this.apifun.limit
				};
				this.apifun.unirequest('/api/study/getSchoolList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						this.datas = [...this.datas,...datas.data];
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			searchfun(){  //  搜索
				this.page = 1;
				this.datas = [];
				this.initData();
			},
			districtfun(){ // 地区
				this.$refs.siteref.open();
			},
			distancefun(){  // 距离
				this.jlac = !this.jlac;
				// this.rdac = this.jlac ? false:true;
				this.page = 1;
				this.datas = [];
				this.initData();
			},
			heatfun(){  //  热度
				this.rdac = !this.rdac;
				// this.jlac = this.rdac ? false:true;
				this.page = 1;
				this.datas = [];
				this.initData();
			},
			entersite(e){
				this.opensiteac = e.value[0];
				this.page = 1;
				this.datas = [];
				this.initData();
			},
			getopensitefun(){
				this.apifun.unirequest('/api/study/getOpenCityList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						datas.unshift({
							name:'地区',
							pid:'',
							id:'',
							code:''
						})
						this.opensitedata[0] = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			getpositionfun(){  // 获取位置
				uni.getLocation({
					type: 'gcj02',  // wgs84
					success: (res) => {
						let lng = res.longitude;
						let lat = res.latitude;
						this.lng = lng;
						this.lat = lat;
						uni.setStorageSync('lat', lat);
						uni.setStorageSync('lng', lng);
					}
				});
			},
			navigate(urls,params){
				if(uni.getStorageSync('token')){
					this.apifun.navigate(urls,params)
				}else{
					this.apifun.toast('您尚未登录；请前往个人中心登录')
				}
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.datas = [];
			this.getpositionfun();
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	.topbg{
		position:fixed;
		top: 0;
		left: 0;
		z-index:10;
		width: 100%;
		height:350rpx;
	}
	.topblock{
		position:sticky;
		z-index: 50;
	}
	.searchblock{
		padding: 20rpx 0;
		.searchmain{
			width: 670rpx;
			border: 1px solid #1573FF;
			border-radius: 100rpx;
			justify-content: space-between;
			background: #ffffff;
			.searchl{
				width:75%;
				padding:10rpx 0;
				.searchlicon{
					width: 50rpx;
					height:46rpx;
					margin-top:5rpx;
					padding:0 20rpx;
					border-right: 1px solid #DADAE5;
				}
				.searchinput{
					width: 80%;
					height: 60rpx;
					margin-left: 20rpx;
					input{
						width: 100%;
						height: 60rpx;
						line-height:60rpx;
					}
				}
			}
			.searchr{
				position: relative;
				width: 156rpx;
				height: 80rpx;
				.searchrtxt{
					position: absolute;
					top: 0;
					left: 0;
					z-index: 51;
					width: 156rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size:30rpx;
				}
				image{
					width: 156rpx;
					height: 80rpx;
				}
			}
		}
	}
	// 分类
	.classify{
		width:80%;
		padding: 40rpx 10%;
		background: #fff;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		justify-content: space-between;
		.classifyeach{
			.classifyeachtxt{
				font-size: 30rpx;
				color: #222222;
			}
			.classifyeachicon{
				margin-top:5rpx;
				margin-left: 10rpx;
			}
		}
	}
	// 列表
	.jdlist{
		position: relative;
		z-index: 0;
		.jditem{
			width: 630rpx;
			padding: 30rpx;
			border-radius: 30rpx;
			margin-top: 20rpx;
			background: linear-gradient(to top, #ffffff,#EFF5FF);
			.jdimg{
				position: relative;
				width: 200rpx;
				height: 200rpx;
				.jdimgb{
					position: absolute;
					top:-10rpx;
					left:-5rpx;
					width: 140rpx;
					height: 50rpx;
					.jdimgbr{
						position: absolute;
						top:0;
						z-index:10;
						width:100%;
						height:40rpx;
						line-height:40rpx;
						text-align: center;
						color: #ffffff;
						font-size:20rpx;
					}
					.learnb{
						position: absolute;
						z-index:9;
						width:100%;
						height: 50rpx;
					}
				}
				.jdimggoods{
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}
			.jbmsg{
				margin-left:20rpx;
				width: 70%;
				.jbmsgtitle{
					font-size: 32rpx;
					color: #222222;
				}
				.jbmsgsite{
					padding: 5rpx 0 0;
					.jbmsgsitetxt{
						font-size: 24rpx;
						color: #666666;
						line-height: 40rpx;
					}
					.jbmsgsitejl{
						margin-left: 20rpx;
						line-height: 40rpx;
					}
				}
				.jbmsgdoc{
					line-height: 40rpx;
					padding: 10rpx 0 0;
					.jbmsgdocb{
						width: 40rpx;
						height:40rpx;
						text-align: center;
						border-radius:4rpx;
						color: #FC2A2A;
						font-size:20rpx;
						background: #FFE4E4;
					}
					.jbmsgdocmoeny{
						margin-left: 10rpx;
						font-size: 20rpx;
						color: #FC2A2A;
					}
					.jbmsgdoctxt{
						width:70%;
						font-size: 20rpx;
						color:#666666;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>